<template>
  <div>
    <div class="updata_list">
      <div class="box2">
        <div class="list_div">
          <p class="p">等级名称</p>
          <div>
            <input
              type="text"
              :placeholder="item.name"
              v-model="input"
              list="nameList"
            />
            <datalist id="nameList">
              <option value="lv.1"></option>
              <option value="lv.2"></option>
              <option value="lv.3"></option>
            </datalist>
          </div>
        </div>
        <div class="list_div">
          <p class="p">升级条件</p>
          <div>
            <input type="radio" />
            <span class="rmb_number">订单金额/数量</span>
            <div class="rmb">
              <p>完成订单金额满</p>
              <input type="text" placeholder="240" v-model="rmb"/>
              <p>元</p>
            </div>
            <p class="red">会员升级条件，不填写默认不自动升级</p>
          </div>
        </div>
        <div class="list_div">
          <p class="p">折扣</p>
          <div>
            <div class="zhekou_box">
              <input type="text" placeholder="0.8" v-model="zhekou" />
              <p>折</p>
            </div>
            <p class="red">请输入0.1-10之间的数字，其他值表示不设置折扣</p>
          </div>
        </div>
        <div class="list_div">
          <p class="p1">状态</p>
          <div>
            <input type="checkbox" :checked="status1" />
            启用
            <input type="checkbox" :checked="status2" />
            禁用
          </div>
        </div>
      </div>
      <div class="btn_box">
        <button class="btn1" @click="btn1(item.id)">提交</button>
        <button class="btn" @click="btn">返回列表</button>
      </div>
    </div>
  </div>
</template>

<script>
import { zqhgradepost } from '../../api/index'
export default {
  created() {
  },
  data() {
    return {
      item: '',
      status1: '',
      status2: '',
      input: '',
      rmb:'',
      zhekou:''
    }
  },
  methods: {
    // 返回列表
    btn() {
      this.$router.push('/grade')
    },
    // 提价修改
    btn1(e) {
      if (this.input != ''&&this.rmb!=''&&this.zhekou>=0.1&&this.zhekou<=9.9) {
        
        zqhgradepost({
          grade: 1,
          name: this.input,
          discount: this.zhekou,
          condition: `完成了订单金额满${this.rmb}.00元`,
          status: '禁用',
          operate:'查看详情'
        }).then((res) => {
          console.log(res)
          if (res.code == 200) {
            this.$notify({
              title: '成功',
              message: '修改成功马上跳转',
              type: 'success',
            })
            setTimeout(() => {
              this.$router.push('/grade')
            }, 2000)
          }
        })
      } else {
        this.$notify({
          title: '警告',
          message: '请输入要添加的等级',
          type: 'warning',
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.updata_list {
  width: 1200px;
  height: 400px;
  border-bottom: 5px solid rgb(237, 236, 236);
  margin: 50px auto;
  border-radius: 5px;
}
.list_div {
  display: flex;
  margin-bottom: 20px;
}
.rmb {
  width: 240px;
  display: flex;
  // border: 1px solid gainsboro;
  margin: 5px 0;
  padding: 3px;
  input {
    width: 100px;
    margin: 0 3px;
  }
}
.rmb_number {
  font-size: 13px;
}
.box2 {
  width: 400px;
}
.zhekou_box {
  width: 240px;
  padding: 3px;
  display: flex;
  // border: 1px solid gainsboro;
  margin: 5px 0;
  input {
    width: 240px;
    height: 20px;
    margin-right: 3px;
  }
}
.p {
  width: 65px;
  text-align: right;
  margin-right: 30px;
}
.p1 {
  width: 65px;
  text-align: right;
  margin-right: 30px;
}
.red {
  font-size: 13px;
  color: red;
}
.btn_box {
  margin: 40px 0px 0 0;
  width: 270px;
  display: flex;
  justify-content: space-around;
  button {
    padding: 0px 20px;
    height: 27px;
    border: none;
  }
}
.btn1 {
  background-color: skyblue;
  color: white;
}
.btn2 {
  background-color: rgb(240, 240, 240);
}
</style>
